<template>
  <div class="main-box">
    <van-empty image="error" :description="description">
      <van-button
        round
        type="danger"
        class="bottom-button"
        color="#459bf3"
        @click="handleToHome"
        >返回首页</van-button
      >
    </van-empty>
  </div>
</template>
<script lang="ts" setup>
import { ref, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const description = ref('该页面不存在!#%!@#')
const router = useRouter()
const route = useRoute()
onBeforeMount(() => {
  if (route.params.description) {
    description.value = route.params.description as string
  }
})

const handleToHome = () => {
  router.push({
    name: 'Home'
  })
}
</script>
<style lang="scss">
.bottom-button {
  width: 300px;
  margin-top: 30px;
}
.main-box {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
